<template>
  <el-card shadow="never">
    <el-form inline :model="form">
      <el-form-item :label="$t('flowInstance.flowName')">
        <el-input
          size="small"
          placeholder=""
          v-model="form.processName"
          style="width: 169px"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('flowInstance.sponsor')">
        <user v-model="form.involvedUser" />
      </el-form-item>
      <el-form-item :label="$t('flowInstance.startDate')">
        <el-date-picker
          v-model="form.date"
          type="daterange"
          align="right"
          unlink-panels
          size="small"
          range-separator="~"
          :start-placeholder="$t('form.startDate')"
          :end-placeholder="$t('form.endDate')"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('flowInstance.status')">
        <el-select
          v-model="form.stauts"
          placeholder=""
          size="small"
          style="width: 120px"
        >
          <el-option
            v-for="{ label, value } of options"
            :key="value"
            clearable
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item :label="$t('flowInstance.category')">
        <category v-model="form.category" />
      </el-form-item> -->

      <el-button type="primary" size="small" @click="onSearch(form)">
        {{ $t("button.search") }}
      </el-button>
      <el-button @click="resetForm('ruleForm')" size="small">{{
        $t(`button.reset`)
      }}</el-button>
      <el-button @click="more = !more" size="small">
        {{ $t("button.more") }}
        <i class="el-icon-caret-bottom" />
      </el-button>
      <el-collapse-transition>
        <div v-if="more">
          <el-form-item :label="$t('flowInstance.businessKey')">
            <el-input
              size="small"
              :placeholder="
                $t('validate.pleaseFillIn', [$t('flowTask.table.businessKey')])
              "
              v-model="form.instanceBusinessKey"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('flowInstance.flowKey')">
            <el-input
              size="small"
              :placeholder="
                $t('validate.pleaseFillIn', [$t('flowTask.table.flowKey')])
              "
              v-model="form.processDefinitionKey"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('flowTask.form.procDefId.title')">
            <el-input
              size="small"
              :placeholder="
                $t('validate.pleaseFillIn', [
                  $t('flowTask.form.procDefId.title'),
                ])
              "
              v-model="form.id"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('flowTask.form.processStatus.title')">
            <el-select
              v-model="form.instanceBusinessState"
              placeholder=""
              size="small"
            >
              <el-option
                v-for="{ label, value } of processOptions"
                :key="value"
                clearable
                :label="label"
                :value="value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-collapse-transition>
    </el-form>
  </el-card>
</template>

<script>
import User from "./User";
// import Category from './Category.vue';
import { OPTIONS, PROCESSOPTIONS } from "../config";
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";

export default {
  emits: ["update:modelValue"],
  components: {
    // Category,
    User,
  },
  data() {
    return {
      more: false,
    };
  },
  setup() {
    const { state, commit, dispatch } = useStore();
    return {
      options: OPTIONS,
      processOptions: PROCESSOPTIONS,
      form: computed({
        get: () => state.flowInstance.form,
        set: (value) => commit("flowInstance/SAVE_FORM", value),
      }),
      onSearch: () => {
        commit("flowInstance/SAVE_PAGINATION", {
          pageNum: 1,
        });
        dispatch("flowInstance/fetchListRequest");
      },
      resetForm: () => {
        state.flowInstance.form = {};
        commit("flowInstance/SAVE_PAGINATION", {
          pageNum: 1,
        });
        dispatch("flowInstance/fetchListRequest");
      },
    };
  },
  created() {
    this.onSearch();
  },
};
</script>

<style scoped lang="scss"></style>
